import React, {Component} from 'react';

/*
属性VS状态
相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）
不同点：
1.属性能从父组件获取，状态不能
2.属性可以由父组件修改，状态不能
3.属性能在内部设置默认值，状态也可以，设置方式不一样
4.属性不在组件内部修改，状态要在组件内部修改
5.属性能设置子组件初始值，状态不可以
6.属性可以修改子组件的值，状态不可以
state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修
改，而外部不能访问也不能修改。你可以认为state是一个局部的、只能被组件自身控制的数据源。state中状
态可以通过this.set state方法进行更新，set state会导致组件的重新染。
props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部
无法控制也无法修改。除非外部组件主动传入新的props，否则组件的props永远保持不变。
没有state的组件叫无状态组件（stateless component），设置了state的叫做有状态组件（state fulcomponent）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会
降低代码维护的难度，也会在一定程度上增强组件的可复用性。
*/
class Child extends Component {
    render() {
        return (
            <div>
                Child-{this.props.text}

                <button onClick={()=>{
                    
                }}>子</button>
            </div>
        );
    }
}


class App extends Component {
    state={
        text:'11111'
    }
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        text:'222222'
                    })
                }}>父按钮</button>
                <Child text={this.state.text}></Child>
            </div>
        );
    }
}

export default App;
